<template>
  <div class="shotbox">
    <div class="paging">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">新闻中行</a></el-breadcrumb-item>
        <el-breadcrumb-item>新闻列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!--数据显示区域-->
      <div class="checkbox">
        <el-radio-group class="checkbox-button" v-model="radio" @input="chooseNewType"> 
          <el-radio-button label="全部新闻"></el-radio-button>
          <el-radio-button label="赛事新闻"></el-radio-button>
          <el-radio-button label="培训新闻"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="data">
        <ul v-for="(item,index) in newslist" :key="index">
          <li @click="goNewDetail(item)">{{ item.title }}<span><el-link type="primary" :underline="false">查看详情</el-link></span></li>
        </ul>
      </div>
      <!--分页按钮-->
      <el-pagination
        background
        layout="prev, pager, next,jumper, ->, total"
        :total="newslist.length"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        style="text-align: right">
      </el-pagination>
    </div>
  </div>
</template>
 
<script>
import {getAllNew,getFilterNew} from "@/api/official";
  export default {
    name: "fenye.vue",
    data() {
      return {
        currentPage: 1, //当前页 刷新后默认显示第一页
        pageSize: 20, //每一页显示的数据量 此处每页显示6条数据
        //假数据
        newslist: [],
        radio:'全部新闻'
      }
    },
    methods: {
      //点击按钮切换页面
      handleCurrentChange(currentPage) {
        this.currentPage = currentPage; //每次点击分页按钮，当前页发生变化
        // console.log(this.currentPage);
      },
      getNewsList() {
        getAllNew().then(res => {
          this.newslist = res.data.list
        })
      },
      goNewDetail(item) {
        this.$router.push({path:'/new-detail/'+ item.id})
      },
      chooseNewType(e) {
        if(e == '全部新闻' ) {
          getAllNew().then(res => {
            this.newslist = res.data.list
          })
        } else {
          getFilterNew(e).then(res => {
            this.newslist = res.data.list
          })
        }
        // const newArr = this.newslist
        // newArr.filter(item => item.type != e)
        // console.log(newArr,'newArr',e)
      }
    },
    mounted() {
      this.getNewsList()
      this.$nextTick(() => {
        let h =
          window.innerHeight ||
          document.documentElement.clientHeight ||
          document.body.clientHeight;
        this.tableHeight = h - 380;
      });
    }
  }
</script>
 
<style scoped>
.checkbox {
  margin: 20px 0;
}
.data {
  height: 800px;
  margin-top: 80px;
}
ul li {
  list-style: none;
  clear: both;
  line-height: 30px;
  border-left: 5px solid #409EFF;
  padding-left: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}
ul li:hover {
  background-color: aliceblue;
}
ul li span {
  float: right;
}
.checkbox {
  clear: both;
}
.checkbox-button {
  float: right;
}
</style>